<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue-2.6.12.js"></script>
  
</head>
<body>
  <div id="app">
    <button @click="showForm=!showForm">显示或隐藏添加</button>
    <table border="1" align="center">
      <tr><td>编号</td><td>商品名</td><td>价格</td><td>数量</td></tr>
      <tr v-for="(item,index) in proList" :key="index"><td>{{index}}</td><td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><button @click="item.num++">+</button>{{item.num}}<button  @click="item.num--">-</button></td>
      </tr>
    </table>
    <h1 align="center">{{totalPrice|formatMoney("$")}}</h1>
    <hr/>
    <form v-show="showForm">
      <table border="1" align="center">
        <tr><td>商品：</td><td><input type="text" v-model="pro.name"/></td></tr>
        <tr><td>价格：</td><td><input type="text" v-model="pro.price"/></td></tr>
        <tr><td>数量：</td><td><input type="text" v-model="pro.num"/></td></tr>
        <tr><td colspan="2"><button @click.prevent="addCart">添加</button></td></tr>
      </table>
    </form>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el:"#app",
      data:{
        showForm:false,
        pro:{},
        proList:[]
      },
      methods:{
        addCart:function(){
          this.proList.push(this.pro);
          this.pro={};
        }
      },
      computed:{
        totalPrice:function(){
          if(this.proList.length>0){
            return this.proList.reduce((pre,item)=>{return pre+item.price*item.num},0);
          }else{
            return 0;
          }
        }
      },
      filters:{
        formatMoney:function(value,pre){
          return pre+" "+value;
        }
      },
      created:function(){
        console.log("vue对象被创建");
        //去调用java代码获取到后台数据
        this.proList=[{name:"aaa",price:11,num:2}]
      }
    });

  </script>
</body>
</html>